
// 公告栏的选中状态（独立）
.T_notice_active {
    background-color: rgba(172, 186, 211, 0.5);
    border-radius: 7px 7px 0 0;
}

//  版心样式(独立) 

.T_w {
    width: 1200px;
    margin: 0 auto;
}



// 定义变量
@fontWhite:#fff;
@fontBlack:#000;
@fontGray:#ddd;
@bgDaytime:rgba(223, 222, 222, 0.7);
// @bgDaytime:linear-gradient(to bottom left, rgba(54, 122, 248, 0.8), rgba(197, 227, 248, 0.8), rgba(69, 78, 78, 0.8)) no-repeat;
@bgitem1:rgba(255, 255, 255,.7);
@bgitem2:rgba(255, 255, 255,.7);
@borShadow: 1px 1px 1px rgba(127, 129, 129, 0.6);



/* 全局颜色样式 */
body {
    font-family: "Helvetica Neue", Arial, "Noto Serif SC", "PingFang SC", "Microsoft Yahei UI", "Microsoft Yahei", sans-serif;
    background: @bgDaytime;
    position: relative;
    &::-webkit-scrollbar {
        /* 滚动条宽度 */
        width: 5px;
        height: 20px;
    };
    &::-webkit-scrollbar-button {
        /* 滚动条上下的按钮 */
        display: none;
    }
    &::-webkit-scrollbar-track {
        /* 外轨道,内轨道会覆盖外轨道 */
        /* background-color: red; */
        display: none;
    };
    &::-webkit-scrollbar-track-piece {
        /* 滑块内轨道样式 */
        background-color: #f3f3f7;
    };
    &::-webkit-scrollbar-thumb {
        /* 滑块样式 */
        background-color: #9bd3f0;
        border-radius: 7px;
        /* -webkit-box-shadow: inset1px1px0rgba(0, 0, 0, .1); */
    };
    &::-webkit-resizer {
        /* 未知 */
        display: none;
    };
    &::-webkit-scrollbar-corner {
        /* 未知 */
        display: none;
    }
}

/* 导航栏 */
.T_nav {
    position: fixed;
    z-index: 99;
    width: 100%;
    height: 36px;
    border-radius: 7px;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: @borShadow;
    // 导航栏内部
    .T_nav_item {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        // 导航栏左
        .T_nav_item_l{
            flex: 9;
            ul{
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                li {
                    a {
                        display: inline-block;
                        box-sizing: border-box;
                        padding: 0 20px;
                        line-height: 36px;
                        font-size: 14px;
                        font-weight: 700;
                        color: #fff;
                        transition: all .5s;
                        &:hover{
                            background-color: rgba(1, 170, 237, 0.5);
                            color: #fff;
                            border-radius: 5px 5px 0 0;
                        };
                    };
        
                };
            }
        
        };
        // 导航栏右
        .T_nav_item_r {
            flex: 1;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            span{
                margin-right: 10px
            }
        }
    };
 
}
// 动画
@keyframes move {
    
    33%{
        transform: translate(-50%,300px);
    };
    66%{
        transform: translate(360px,300px);
    };
    100%{
        transform: translate(360px,-300px);
    }
    
}

/* 头部 */
.header_bg{
    width: 100%;
    height: 660px;
    margin-bottom: 30px;
    position: relative;
    &::after{
        position: absolute;
        content: '萝卜的博客';
        font-size: 30px;
        font-weight: 700;
        color: rgb(247, 151, 8);
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        // 引用动画名字
        animation-name: move;
        // 持续时间
        animation-duration: 3s;
        // 运动曲线
        animation-timing-function: ease;
        // 何时开始
        animation-delay: 1s;
        // 重复次数
        animation-iteration-count: infinite;
        // 是否回流
        animation-direction: alternate;


    }
    .T_header {
         padding-top: 20px;
        width: 1200px;
        height: 660px;
        background: url(../Exterior/img/hzw_bg.jpg) no-repeat;
        background-size: cover;
        border-radius: 0 0 7px 7px;
        // 头部左
        .T_header_l {
            float: left;
            position: relative;
            margin-top: 30px;
            h1 {
                display: inline-block;
                img {
                    height: 60px;
                };
            };
            h2 {
                display: inline-block;
                cursor: pointer;
                color: #fff;
                transition: padding-left 0.5s;
                &:hover {
                    padding-left: 10px;
                }
            };
            .qr_code_img {
                display: none;
                width: 200px;
                height: 220px;
                position: absolute;
                z-index: 999;
                background-color: #fff;
                p {
                    text-align: center;
                    font-size: 16px;
                    font-weight: 700;
                    color: rgb(233, 13, 13);
                };
                img {
                    width: 200px;
                    height: 200px;
                }
            };
            
            .T_search {
                display: inline-block;
                vertical-align: middle;
                input {
                    float: left;
                    width: 100px;
                    height: 30px;
                    margin-left: 20px;
                    border: 1px solid transparent;
                    border-radius: 7px 0 0 7px;
                    border-right: none;
                    padding-left: 15px;
                    transition: width .5s;
                    &:focus {
                        height: 30px;
                        width: 300px;
                        border-right: none;
                    };
                };
                button {
                    float: left;
                    width: 50px;
                    height: 30px;
                    border: 1px solid transparent;
                    border-left: none;
                    /* background-color: #ffffff; */
                    border-radius: 0 7px 7px 0;
                }
                
            };
            
        };
        // 头部右
        .T_header_r {
            display: none;
            float: right;
            height: 60px;
            margin-top: 30px;
            img {
                display: block;
                height: 100%;
            };
            h3 {
                display: inline-block;
                overflow: hidden;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                margin: 5px 10px 5px 0;
            }
            h4 {
                display: inline-block;
                vertical-align: top;
                margin: 20px 20px 0 0;
                padding: 3px;
                background-color: rgba(255, 255, 255, 0.6);
                border-radius: 5px;
            }
        };
    };
}



/* 页面内容 */

.T_main {
    // main左
    .T_main_content_left {
        float: left;
        width: 900px;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 7px;
        background-color: @bgitem1;
        box-shadow: @borShadow;
    };
    // main右
    .T_main_content_right {
        float: right;
        width: 280px;
        // 公告
        .T_notice {
            width: 280px;
            min-width: 280px;
            height: 300px;
            border-radius: 7px;
            margin-bottom: 15px;
            background-color: @bgitem2;
            box-shadow: @borShadow;
            box-sizing: border-box;
            .T_notice_item_hd{
                ul {
                    width: 100%;
                    display: flex;
                    box-sizing: border-box;
                    height: 30px;
                    border-radius: 7px 7px 0 0;
                    li {
                        flex: 1;
                        height: 30px;
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                        &:hover{
                            background-color: rgba(121, 168, 249, 0.7);
                            border-radius: 7px 7px 0 0;
                            color: #fff;
                        };
                        span {
                           color: #000
                        };
                    };
                };

            };
            .T_notice_item_bd {
                width: 100%;
                height: 270px;
                li {
                    width: 255px;
                    line-height: 30px;
                    font-size: 12px;
                    margin-left: 15px;
                };
                .T_vip_login{
                    display: none;
                    input {
                        display: block;
                        margin: 30px auto;
                        &:last-child {
                            width: 60px;
                            height: 25px;
                            cursor: pointer;
                            border: none;
                            background-color: #ccc;
                        }
                        
                    };
                    .text {
                        display: block;
                        height: 25px;
                        margin: 30px auto;
                        padding-left: 5px;
                    };
                };
                 .T_contact {
                    display: none;
                };
            };
        };
        // 每日一句
        .T_daily {
            width: 280px;
            height: 100px;
            /* border: 1px solid #ccc; */
            border-radius: 7px;
            margin-bottom: 15px;
            box-sizing: border-box;
            padding: 10px;
            background-color:  @bgitem2;
            box-shadow: @borShadow;
            color: #666666!important;
            h3 {
                line-height: 30px;
            };
            p {
                font-size: 16px;
            }
        };
        // 留言板
        .T_message {
            width: 280px;
            height: 300px;
            border-radius: 7px;
            margin-bottom: 15px;
            padding: 10px;
            box-sizing: border-box;
            background-color:  @bgitem2;
            box-shadow: @borShadow;
            h3 {
                border-bottom: 1px solid #ccc;
                margin-bottom: 5px;
                line-height: 30px;
            };
            ul{
                .T_message_item {
                    margin-top: 10px;
                    a {
                        display: block;
                        height: 60px;
                        width: 260px;
                        img {
                            float: left;
                            width: 60px;
                            height: 60px;
                            border-radius: 30px;
                        };
                        .T_message_item_text {
                            float: right;
                            position: relative;
                            width: 200px;
                            span {
                                float: left;
                            };
                            label {
                                float: right;
                            };
                            em {
                                position: absolute;
                                width: 200px;
                                top: 20px;
                                left: 10px;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 2;
                                overflow: hidden;
                                word-break: break-all;
                            };
                        };
                    };
                };
            };
        };
        
    };
};

// 底部
.T_footer {
    height: 150px;
    /* 解决外边距塌陷 */
    border-top: 1px solid transparent;
    box-sizing: border-box;
    margin-top: 50px;
    border-radius: 7px;
    padding: 0 10px;
    background-color:  @bgitem2;
    box-shadow: @borShadow; 
    .T_footer_item {
        margin: 10px 0px 0 0px;
        font-size: 14px;
        ul {
            /* 清除浮动 */
            overflow: hidden;
            height: 40px;
            li {
                float: left;
                padding-bottom: 3px;
                a {
                    display: inline-block;
                    line-height: 36px;
                    padding: 0 20px;
                    transition: all 0.5s;
                    &:hover {
                        background-color: rgba(1, 170, 237, 0.5);
                        border-radius: 5px;
                        color: #fff;
                        padding-right: 25px;
                    }
                }
            }
        };
        .copyright {
            padding-top: 10px;
            border-top: 1px solid #c2c2c2;
        }
    }
}

